<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Echars学习</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
<!--为Echars准备一个具备大小高度的DOM-->
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div id="main" style="width: 600px;height: 400px;"></div>

        </div>
        <div class="col-lg-6">
            <div id="main2" style="width: 600px;height: 400px;"></div>

        </div>

    </div>

</div>
</body>
<script type="text/javascript" src="/js/echarts.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>

<script type="text/javascript">
    var myChar = echarts.init(document.getElementById('main'));
    var myChartPie = echarts.init($("#main2")[0]);


    var option2 ={
        //she设置背景,全局背景
        backgroundColor:'#2c343c',

        //weni文本样式设置,属于全局设置
        textStyle:{
            color:'rgba(255,255,0.3)'
        },
        series : [{
            name:'访问来源',
            type:'pie',
            radius:'60%',
//            roseType: 'angle',
            data:[{value:459,name:'视频广告'},
                {value:525,name:'联盟广告'},
                {value:369,name:'邮件营销'},
                {value:251,name:'直接访问'},
                {value:149,name:'搜索引擎'}
            ],
            //阴影配置
            itemStyle : {
                /*正常显示
                normal:{
                    //yin阴影的大小
                    shadowBlur:200,
                    //阴影水平方向的偏移
                    shadowOffsetX:0,
                    //阴影垂直方向上的偏移
                    shadowOffsetY:0,
                    //阴影颜色
                    shadowColor:'rgba(0,0,0.5)'
                },*/

                //shu鼠标hover的时候高亮显示
                emphasis:{
                    shadowBlur:200,
                    shadowColor:'rgba(0,0,0.6)'
                }
            }
        }]
    };
    myChartPie.setOption(option2);

    //指定图表的配置项和数据
    var option = {
        title:{
            text:'Echars入门'
        },
        tooltip:{},
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        series:[{
            name: "销量",
            type: "bar",
            data:[]
        }]
    };

    myChar.setOption(option);
    myChar.showLoading();    //数据加载完之前先显示一段简单的loading动画
    var names=[];//类别数组，盛放X轴坐标值
    var nums=[];//销量数组，盛放Y坐标值
    $.ajax({
        type:'post',
        async:true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url:"getdata",
        data:{},
        dataType:'json',
        success:function(result){
            //请求成功执行该函数
            if(result){
                for(var i =0;i<result.length;i++){
                    names.push(result[i].name);
                    nums.push(result[i].num);
                }
                myChar.hideLoading();//隐藏加载动画
                myChar.setOption({//jiaz加载图表

                    xAxis:{
                        data:names
                    },
                    series:[{
                        name:'销量',
                        data:nums
                    }]

                });
            }
        },
        error:function(errorM) {
            alert("数据加载失败");
            myChar.hideLoading();
        }
    });
</script>
</html>